<template>
  <view class="oneClick">
    <classifyHead title="一键预约" />
    <view class="content">
      <view class="middle" style="margin-top: 20rpx">
        <view style="color: aliceblue; margin-left: 40rpx"
          >今日可用竞购积分<image
            src="../../static/deatil.png"
            mode="scaleToFill"
        /></view>

        <view class="score">100000.00</view>
      </view>
      <view class="middle" style="margin-top: 20rpx;">
        <view class="left">
            <view>智能AI参拍预约助手</view>
            <view>已服务 <text style="color: chocolate;">210天</text> 剩余 <text  style="color: chocolate;">6</text>天</view>
        </view>
        <button class="btn">续费</button>
      </view>
      <view class="shadowBox">
        <view class="name">设置今日使用竞购积分数</view>
        <view class="purchaseServices">
          <checkBox />
          <view class="purchaseScore">
            <view style="margin-bottom: 20rpx">全部竞购积分:10000</view>
          </view>
        </view>
        <view class="purchaseServices">
          <checkBox />
          <view class="purchaseScore">
            <view style="margin-bottom: 20rpx">一半竞购积分:5000</view>
          </view>
        </view>
        <view class="purchaseServices">
          <checkBox />
          <view class="purchaseScore" style="display: flex;">
            <view style="margin-bottom: 20rpx">自定竟购积分:</view>
            <input type="number" placeholder="请输入" >
          </view>
        </view>
<view class="complate">
    <view>2025-08-18 07:36</view>
    <view>已设置</view>
</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import classifyHead from "@/components/classifyHead.vue";
import checkBox from "@/components/checkbox.vue";
</script>

<style lang="scss">
.oneClick {
  .content {
    width: calc(100% - 20rpx);
    padding: 0 10rpx;
    .middle {
      background: #5756b3;
      height: 106rpx;
      width: 690rpx;
      border-radius: 30rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 10rpx 20rpx;
      image {
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
      }
      .score {
        width: 200rpx;
        color: aliceblue;
        font-size: 36rpx;
        text-align: right;
      }
      .btn {
        width: 147rpx;
        height: 64rpx;
        border-radius: 50rpx;
        background: #e07002;
        display: flex;
        justify-content: center;
        align-items: center;
        color: aliceblue;
        margin-left: 100rpx;
      }
      .left{
        width: 320rpx;
        margin-left: 75rpx;
      }
    }

    .shadowBox {
      margin-top: 20rpx;
      width: calc(100% - 40rpx);
      padding: 0 20rpx;
      height: 850rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
      border-radius: 30rpx;
      .name {
        font-size: 40rpx;
        width: 100%;
        text-align: center;
        padding-top: 20rpx;
      }
      .purchaseServices {
        margin-top: 20rpx;
        border-radius: 30rpx;
        width:calc(100% - 80rpx) ;
        height: 170rpx;
        border: 1px solid #c7c3c3;
        display: flex;
        align-items: center;
        padding: 0 40rpx;
        .purchaseScore{
            margin-left: 40rpx;
            input{
width: 230rpx;
height: 50rpx;
border: 1px solid #c7c3c3;
border-radius: 30rpx;
margin-left: 60rpx;
padding-left: 20rpx;
            }
        }
      }
  .complate{
    margin-top: 100rpx;
    width: 100%;
    text-align: center;
  }
    }
  }
}
</style>

































